<style>
    #mid_template {
        width: 740px;
    }

    #mid_template img {
        width: 100px;
    }
</style>
<div id="mid_template" data-bind="foreach: mid_items">
    <img onerror="imgerror(this)" class="mid_image" data-bind="attr : { src : pic , link : link}" alt="">
</div>

<script>
    function mid_template() {
        var items = <?php echo json_encode($items)?>;
        this.mid_items = ko.observableArray([]);
        var self = this;
        items.forEach(function (item) {
            self.mid_items.push(new single_item(item.pic,item.link))
        })
    }

    function single_item(pic,link) {
        this.pic = ko.observable(pic);
        this.link = ko.observable(link);
    }
    ko.applyBindings(new mid_template(), $('#mid_template')[0]);

</script>


<script>
    /**
     * 保存设置的函数
     */
    $.getJSON("/shop/templates/<?php echo $config['template_name']?>/images.json", function (json) {
        window.save_json = function () {
            $('tr.name').each(function () {
                var _this = $(this);
                var name = _this.find('td').text().replace("：", "").trim()
                if (json[name]) {
                    if (name == '中部广告位') {
                        var arr = [];
                        $('.mid_image').each(function () {
                            arr.push({
                                pic: this.getAttribute('src'),
                                link: this.getAttribute("link")
                            })
                        });
                        json[name].items = arr;
                    } else if (name == '楼层') {
                        var arr = []
                        $('.each_floor').each(function () {
                            var imgs = []
                            var _index = [0, 5, 1, 2, 6, 3, 7, 8,4,9];
                            $(this).find('.floor img').each(function (index) {
                                console.log(imgs[_index[index]])
                                imgs[_index[index]] = {
                                    pic: this.getAttribute("src"),
                                    link: this.getAttribute('link')
                                };
                            });

                            arr.push({
                                'color': $(this).find('[name=floor_color]').val(),
                                'floor_name': $(this).find('[name=floor_name]').val(),
                                'more' : $(this).find('[name=more]').val(),
                                'images': imgs
                            })
                        })
                        json[name].items = arr;
                    } else {
                        json[name].pic = _this.next().find('img[link]').attr('src');
                        json[name].link = _this.next().find("img[link]").attr('link')
                    }
                }

            });
            console.log(json);
            var index = layer.load();
            $.post("/admin/?act=web_config&op=save_json", json, function () {
                layer.close(index);
                layer.msg("保存成功", function () {
                    location.reload();
                })
            });

        };
    });
</script>